<template>
  <div style="display: flex;" >
  <div   :style="'height:'+containerHeight+'px'">
    <div v-for="(item, index) in allmenu" class="tools" :key="index" :class="{ 'floatleft': index>0 }">
      <div class="title1 yicititle">{{ item.group }}</div>
      <div v-for="(i, index1) in item.children" :key="index1" >
        <div :title="i.title" :draggable="true" class="buttons text-center py-4 cursor-pointer"
             @dragstart="onDragStart($event, i)">
          <i v-if="i.key && i.key !== 'img'&& i.key !== 'ltee'" class="yicititle iconfont text-2xl" :class="`icon-${i.key}`"></i>
          <i v-else-if="i.key == 'ltee'" class="yicititle text-2xl" :class="`icon ${i.icon}`" style="font-size: 30px"></i>
          <img v-else-if="i.key === 'img'" :src="i.data.image" style="width: 30px;height: 30px" class="yicititle m-auto"/>
          <img v-else-if="i.svg" :src="i.svg"style="width: 30px;height: 30px" class="yicititle m-auto" alt=""
               srcset=""/>
          <div class="text-sm text-opacity-50 mt-1 theme-front-color">{{i.title}}</div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import {menus} from './menus.js'
  import {deepClone, EventAction} from '@topology/core'
  import {parseSvg} from '@topology/svg'
  import axios from 'axios'
  import * as Util from "@/utils";
  export default {
    data() {
      return {
        menus,
        allmenu: []
      }
    },
    methods: {
      async  onDragStart(event, i) {
        console.log(event, i)
        const mixins = {}
        if (i.svg) {
         let data2 = await axios.get(i.svg).then(res => {
           return parseSvg(res.data)
          })
          event.dataTransfer.setData('Topology', JSON.stringify(data2))
         // window.topology.canvas.addCaches = data2
        } else {
          event.dataTransfer.setData('Topology', JSON.stringify(Object.assign(i.data, mixins)))
        }
      },
    },
    created() {
      this.allmenu = []
      let jf = {
        group: '户型图',
        children: []
      }
      for(let i=1;i<9;i++) {
        jf.children.push({
          key: 'img',
          title: '房间' + i,
          data: {
            key: 'bg',
            name: 'image',
            width: 900,
            height: 450,
            rect: {
              width: 600,
              height: 600
            },
            image: "http://" + window.location.hostname + ":8012/images/room" + i + ".png",
          }
        })
      }
      Object.assign(this.allmenu,this.menus)
      this.allmenu.push(jf)
      this.$nextTick(() => {
      });
    },

    computed:{
      containerHeight() {
        return Util.getClientHeight() - 183;
      },
    },
  }
</script>

<style>
  .tools {
    flex-shrink: 0;
    width: 100%;
    /*background-color: #f8f8f8;*/
    border-right: 1px solid #d9d9d9;
    overflow-y: auto;
    display: inline-block;
  }

  .buttons {
    width: 40%;
    float: left;
  }

  .title1 {
    color: #0d1a26;
    font-weight: 600;
    font-size: 1.12rem;
    line-height: 1;
    padding: 1.55rem 0.1rem;
/*    margin-top: 1.08rem;
    margin-bottom: 1.08rem;*/
    border-bottom: 1px solid #ddd;
    width:100%;

  &:first-child {
        border-top: none;
      }

  }
.floatleft {
  float: left
}
</style>
